<template>
  <view>
    <!-- 底部操作栏 -->
    <view class="bottom-tabbar">
      <view class="tab-item" @click="handleRefresh">
        <text class="tab-icon">🔄</text>
        <text class="tab-text">刷新</text>
      </view>
      
      <view 
        class="tab-item" 
        @click="handleCallClimber" 
        v-if="showCallButton">
        <text class="tab-icon">📞</text>
        <text class="tab-text">联系陪爬员</text>
      </view>
      
      <view 
        class="tab-item" 
        @click="handleViewRoute" 
        v-if="showLocationButton">
        <text class="tab-icon">📍</text>
        <text class="tab-text">查看位置</text>
      </view>
      
      <view class="tab-item" @click="handleBackHome">
        <text class="tab-icon">🏠</text>
        <text class="tab-text">返回首页</text>
      </view>
    </view>

    <!-- 安全占位，避免内容被底部栏遮挡 -->
    <view class="bottom-safe-area"></view>
  </view>
</template>

<script>
export default {
  name: 'BottomActionBar',
  
  props: {
    // 是否显示联系陪爬员按钮
    showCallButton: {
      type: Boolean,
      default: true
    },
    // 是否显示查看位置按钮
    showLocationButton: {
      type: Boolean,
      default: true
    },
    // 陪爬员电话（可选）
    climberPhone: {
      type: String,
      default: ''
    }
  },
  
  methods: {
    // 刷新数据
    handleRefresh() {
      this.$emit('refresh')
      uni.showLoading({ title: '刷新中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({ title: '刷新成功', icon: 'success' })
      }, 1000)
    },
    
    // 联系陪爬员
    handleCallClimber() {
      uni.showActionSheet({
        itemList: ['拨打电话', '发送消息'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 拨打电话
            this.makePhoneCall()
          } else if (res.tapIndex === 1) {
            // 发送消息（跳转到聊天页面）
            this.$emit('sendMessage')
            uni.showToast({ 
              title: '消息功能开发中', 
              icon: 'none' 
            })
          }
        }
      })
    },
    
    // 拨打电话
    makePhoneCall() {
      if (this.climberPhone) {
        uni.showModal({
          title: '拨打电话',
          content: `确定要拨打陪爬员电话 ${this.climberPhone} 吗？`,
          success: (res) => {
            if (res.confirm) {
              uni.makePhoneCall({
                phoneNumber: this.climberPhone,
                success: () => {
                  console.log('拨打电话成功')
                },
                fail: (err) => {
                  console.error('拨打电话失败', err)
                  uni.showToast({ 
                    title: '拨打电话失败', 
                    icon: 'none' 
                  })
                }
              })
            }
          }
        })
      } else {
        uni.showModal({
          title: '提示',
          content: '陪爬员电话信息获取中，请稍后重试',
          showCancel: false
        })
      }
    },
    
    // 查看位置
    handleViewRoute() {
      uni.showModal({
        title: '查看位置',
        content: '此功能需要陪爬员开启位置共享',
        showCancel: true,
        confirmText: '查看地图',
        success: (res) => {
          if (res.confirm) {
            this.$emit('viewLocation')
            // TODO: 跳转到地图页面显示陪爬员实时位置
            uni.showToast({ 
              title: '地图功能开发中', 
              icon: 'none' 
            })
          }
        }
      })
    },
    
    // 返回首页
    handleBackHome() {
      uni.reLaunch({
        url: '/pages/index',
        success: () => {
          console.log('返回首页成功')
        },
        fail: (err) => {
          console.error('返回首页失败', err)
          uni.showToast({ 
            title: '返回失败，请重试', 
            icon: 'none' 
          })
        }
      })
    }
  }
}
</script>

<style scoped>
/* ==================== 底部操作栏 ==================== */
.bottom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1rpx solid #e4e7ed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20rpx 0;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 20rpx;
  cursor: pointer;
  transition: all 0.3s;
  flex: 1;
}

.tab-item:active {
  transform: scale(0.95);
  opacity: 0.7;
}

.tab-icon {
  font-size: 44rpx;
  margin-bottom: 8rpx;
  transition: transform 0.3s;
}

.tab-item:active .tab-icon {
  transform: scale(1.2);
}

.tab-text {
  font-size: 22rpx;
  color: #606266;
  font-weight: 500;
}

.tab-item:active .tab-text {
  color: #409EFF;
}

/* 底部安全区域占位 */
.bottom-safe-area {
  height: calc(180rpx + env(safe-area-inset-bottom));
}

/* 适配不同屏幕 */
@media screen and (max-width: 375px) {
  .tab-icon {
    font-size: 40rpx;
  }
  
  .tab-text {
    font-size: 20rpx;
  }
}
</style>

